<template>
	<el-dialog title="商品列表" v-model="dialogVisible" width="1200px" center :before-close="handleClose">
		<!-- <goods @getValue="getGoodsValue"></goods> -->
		<div class="mt15">
			 <el-row :gutter="20">
			    <el-col :span="4">
					<div class="pl30 mt15">
						<div class="main-color fs16 mb20 fb">
							商品分类
						</div>
						 <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false"
						 	@node-click="handleNodeClick" :highlight-current="true">
						 	<template #default="{ node, data }">
						 		<div class="custom-tree-node flex col-center row-between">
						 			<span>{{ node.label }}</span>
						 		</div>
						 	</template>
						 </el-tree>
					</div>
				</el-col>
			    <el-col :span="20">
					<div class="flex col-center row-between plr30 pb10">
						<div>
							已选择<span class="main-color">{{ids.length}}</span>个商品
						</div>
						<el-form class="flex col-top row-between" :model="queryParams" ref="queryRef" :inline="true">
							<el-form-item label="商品名称/编号" prop="keyword" style="margin-bottom: 0;">
								<el-input
								v-model="queryParams.keyword"
								placeholder="请输入"
								clearable
								class="resetInput"
								style="width: 200px"
								:suffix-icon="Search"
								/>
							</el-form-item>
							<el-button class="mt5" type="defaultBtn" @click="handleQuery">搜索</el-button>
							<el-button class="mt5" @click="resetQuery">重置</el-button>
						</el-form>		
					</div>
					<el-table
						ref="table"
					   v-loading="loading"
					   :data="list"
					   style="width: 100%;"
						 :header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
						 :cell-style="{height:'54px'}"
						 @selection-change="handleSelectionChange"
					>
					  <el-table-column type="selection" width="55" align="center" :selectable="isSelect" />
					   <el-table-column label="商品名称" align="center" prop="commodityName" :show-overflow-tooltip="true" />
					   <el-table-column label="商品编号" align="center" prop="commodityNumber" :show-overflow-tooltip="true" />
					   <el-table-column label="标准单价" align="center" prop="caseUnitPrice" :show-overflow-tooltip="true" />
					   <el-table-column label="产品规格" align="center" prop="specificationId" :show-overflow-tooltip="true" >
						  <template v-slot="scope">
						  	<dict-tag :options="bus_product_specification_unit" :value="scope.row.specificationId" />
						  </template>
					   </el-table-column>   
					   <!-- <el-table-column label="启用状态" align="center" prop="status">
					   	<template v-slot="scope">
					   		<el-switch disabled v-model="scope.row.status" class="ml-2" inline-prompt active-text="启用"
					   			inactive-text="禁用" :loading="loading" />
					   	</template>
					   </el-table-column> -->
					   <el-table-column label="备注信息" align="center" prop="remark" :show-overflow-tooltip="true" />
					</el-table>
					<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"  @pagination="getList"/>
				</el-col>
			  </el-row>
		</div>
		<div slot="footer" class="dialog-footer text-right mt30">
			<el-button class="cancelSubBtn" @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="getGoodsGroup()" class="mainSubBtn">确 定</el-button>
		</div>
	</el-dialog>	
</template>

<script>
	import goods from "@/views/peoples/addGoods/components/tab1.vue"
	import {
		getGoodsGroup
	} from "@/api/business/product";
	import {
		listClassify1, //商品分类树
		listGoods,//列表
	} from "@/api/business/product";
	export default{
		components:{
			goods
		},
		props:{
			propIds:{
				type:Array,
				default:res=>{return[]}
			}
		},
		watch:{
			propIds:{
				handler(val){
					this.ids = val
				},
				deep: true, immediate: true
			}
		},
		data(){
			return {
				dialogVisible:false,
				data: [],//分类树数据
				total:'',
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					keyword: '', 
					classifyId:'',
					channelType: '', // 销售渠道
					status:0
				}, //查询参数
				list:[],
				loading:true,
				ids:this.propIds,//选中商品的id
				bus_product_specification_unit:this.useDict('bus_product_specification_unit').bus_product_specification_unit,//规格
			}
		},
		created() {
			this.getTree(1)
		},
		methods:{
			open(){
				this.dialogVisible = true
				this.checkList()
			},
			handleClose(){
				this.dialogVisible = false
			},
			isSelect(row, index) {
			  if (row.status == true ) {
				return true;
			  } 
			},
			handleNodeClick(e){
				if(e.id*1 != -1){
					this.queryParams.classifyId = e.id	
			    }else{
					this.queryParams.classifyId = ''
				}				
				this.getList();
			},
			//分类树
			getTree(num) {
				listClassify1().then(res => {
					if (res.code == 200) {
						let arr = [{
							ancestors:'',
							id:'-1',
							name:'全部',
							parentId:''
						}]
						let dataArr = arr.concat(res.data)
						for (let key in dataArr) {
							dataArr[key].label = dataArr[key].name
						}
						this.data = this.handleTree(dataArr)
						console.log(dataArr,'this.data1')
						console.log(this.data,'this.data')
						if(num == 1){
							this.getList()
						}
					}
				})
			},
			// 搜索
			handleQuery(){
				this.getList()
			},
			// 重置按钮操作
			resetQuery() {
			  this.resetForm("queryRef");
			  this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
			  // this.ids = selection.map(item => item.id);
			  let allIds = [...this.ids];
			  selection.map(item => {
			  	if (!allIds.includes(item.id)) {
			  		allIds.push(item.id)
			  	}
			  })
			  this.ids = [...allIds]
			  for (let i = 0; i < this.ids.length; i++) {
			  	if(selection.id == this.ids[i]){
			  		this.ids.splice(i,1)
			  	}
			  }
			},
			
			//查询商品列表
			getList() {
				this.loading = true;
				listGoods(this.queryParams).then((response) => {
					this.list = response.rows;
					for(let key in this.list){
						this.list[key].status = this.list[key].status == '0' ? true : false
					}
					this.total = response.total;
					this.loading = false;
					// this.ids = []
					this.checkList()
				});
			},
			checkList(){
				this.$nextTick(() => {
					this.list.map((item) => {
						if (this.ids.includes(item.id)) {
							this.$refs.table.toggleRowSelection(item, true)
						}else{
							this.$refs.table.toggleRowSelection(item, false)
						}
					})
				})
			},
			// getGoodsValue(e){
			// 	// 获取选中的商品
			// 	this.ids = e
			// },
			getGoodsGroup(){
				if(this.ids == ''){
					this.$modal.msgError('请选择商品')
					return false;
				}
				getGoodsGroup(this.ids).then(res=>{
					this.$emit('getGoodsList',res.data)
					this.dialogVisible = false
				})
			}
		}
	}
</script>

<style>
	.el-tree-node{
		margin: 6px 0;
	}
</style>